<template>

	<view class="demo">
		<view class="demo_tops">
			<view class="demos_zuo" @click="returns">
				<span class="icon-return"></span>
			</view>
			<p style="height: 5vw;font-size: 4vw;line-height: 10vw;margin-left: 30vw;">设置</p>
		</view>
		<view class="tops">
			<view class="tops_left">
				<h3 style="margin-left: 3vw;font-size: 4vw;margin-top: 5vw;">头像</h3>
				<!-- <p style="margin-left: 3vw;font-size: 3vw;color: #ccc;">管理APP使用的系统权限</p> -->
			</view>
			<view class="tops_right">
				<view class="touxiang">
					<!-- <img src="../" style="width: 100%;height: 100%;overflow: hidden;" alt="" /> -->
				</view>
			</view>
		</view>
		<view class="topse" @click="names">
			<view class="tops_left">
				<h3 style="margin-left: 3vw;font-size: 4vw;margin-top: 5vw;">昵称</h3>
				<!-- <p style="margin-left: 3vw;font-size: 3vw;color: #ccc;">管理APP使用的系统权限</p> -->
			</view>
			<view class="tops_right">

				<p
					style="font-size: 7vw;color: #ccc;line-height: 13vw;width: 10vw;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
					<span style="font-size: 4vw;color: #ccc;">{{nickname}}</span>
				</p>

			</view>
		</view>
		<view class="topse" @click="real">
			<view class="tops_left">
				<h3 style="margin-left: 3vw;font-size: 4vw;margin-top: 5vw;">账号及安全</h3>
				<!-- <p style="margin-left: 3vw;font-size: 3vw;color: #ccc;">管理APP使用的系统权限</p> -->
			</view>
			<view class="tops_right">
				<p style="font-size: 7vw;color: #ccc;line-height: 13vw;">></p>

			</view>
		</view>
		<view class="topse">
			<view class="tops_left">
				<h3 style="margin-left: 3vw;font-size: 4vw;margin-top: 5vw;" @click="set(7)">Steam账号管理</h3>
				<!-- <p style="margin-left: 3vw;font-size: 3vw;color: #ccc;">管理APP使用的系统权限</p> -->
			</view>
			<view class="tops_right">

				<p style="font-size: 7vw;color: #ccc;line-height: 13vw;">></p>

			</view>
		</view>
		<view class="tops">
			<view class="tops_left">
				<h3 style="margin-left: 3vw;font-size: 4vw;margin-top: 5vw;" @click="set(9)">关于我们</h3>
				<!-- <p style="margin-left: 3vw;font-size: 3vw;color: #ccc;">管理APP使用的系统权限</p> -->
			</view>
			<view class="tops_right">

				<p style="font-size: 7vw;color: #ccc;line-height: 13vw;">></p>

			</view>
		</view>
		<view class="topse" style="margin-top: 4vw;background-color:#f6f9fc ;">
			<button @click="backs"
				style="width: 100%;height: 10vw;line-height: 10vw;font-size: 4vw;background-color: #ffffff;border: none;">
				退出登录
			</button>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				nickname: '',
				fuhao: '>'
			}
		},
		onShow() {
			let nickname = uni.getStorageSync("datausers").nickname
			this.nickname = nickname
		},
		methods: {
			returns() {
				uni.navigateBack()
			},
			backs() {
				uni.clearStorage()
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			real() {
				// let 
				uni.navigateTo({
					url: "/pages/My/safe/safe"
				})
			},
			names() {
				uni.navigateTo({
					url: "/pages/My/name/name"
				})
			},
			set(index) {
				if (index == 7) {
					uni.navigateTo({
						url: "/pages/steam/steam"
					})
				}
				if (index == 9) {
					uni.navigateTo({
						url: "/pages/My/aboutUs/aboutUs"
					})
				}
			}
		}
	}
</script>
<style type="text/css">
	@import url("../../../static/icon2/style.css");
</style>
<style>
	.demo {
		width: 100vw;
		height: 100vh;
		background-color: #f6f9fc;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: scroll;

	}

	.top {
		width: 100%;
		height: 15vw;
		/* margin-top: 5vw; */
		background-color: #ffffff;
		/* border-radius: 2vw; */
		border-bottom: 1px solid #edecec;
		display: flex;
	}

	.tops {
		width: 100%;
		height: 15vw;
		margin-top: 5vw;
		background-color: #ffffff;
		border-radius: 2vw;
		display: flex;
	}

	.demo_tops {
		width: 100%;
		height: 10vw;
		display: flex;
	}

	.demos_zuo {
		width: 15vw;
		height: 100%;
		text-align: center;
		line-height: 10vw;
		font-size: 4vw;
	}

	.topse {
		width: 100%;
		height: 15vw;

		background-color: #ffffff;
		border-radius: 2vw;
		display: flex;
	}

	.tops_left {
		width: 90%;
		height: 100%;
	}

	.tops_right {
		width: 10%;
		height: 100%;
	}

	.touxiang {
		width: 8vw;
		height: 8vw;
		border-radius: 50%;
		margin-top: 3vw;
		background-color: black;
		background-image: url("../../../static/icon/avatar.jpg");
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
	}

	.top_right {
		width: 10%;
		height: 100%;
	}

	.kou {
		width: 90%;
		height: 90vw;
		margin-top: 5vw;
		background-color: #ffffff;
		border-radius: 5vw;
		overflow: scroll;
	}
</style>